import { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';
import { Progress, Toast, Modal } from 'antd-mobile';
import { mobileShopUrl } from 'config';
const alert = Modal.alert;
@connect(({ yangji }) => yangji)
class Yangji extends Component {
  componentDidMount() {
    let nowHour = new Date().getHours();
    console.log('​Yangji -> componentDidMount -> nowHour', nowHour);
    if (nowHour < 18) {
      this.setState({ isNight: false });
    } else {
      this.setState({ isNight: true });
    }
    this.props.dispatch({
      type: 'yangji/getZhuangyuanInfoEff'
    });
  }
  state = {
    showMyPoints: false,
    showRule: false,
    showModal: false,
    showSignInSuccess: false,
    isNight: false
  };
  onShowPoints = () => {
    this.setState({
      showMyPoints: true
    });
  };
  onShowRule = () => {
    this.setState({
      showRule: true
    });
  };
  onShowModal = () => {
    this.setState({
      showModal: true
    });
  };
  onShowSignInSuccess = () => {
    this.props.dispatch({
      type: 'yangji/feedSignEff',
      callback: () => {
        this.setState({
          showSignInSuccess: true
        });
        setTimeout(() => {
          this.setState({ showSignInSuccess: false });
        }, 2000);
      }
    });
  };
  onFeedChick = () => {
    this.props.dispatch({
      type: 'yangji/feedChickEff'
    });
  };
  onChangePointsToFeed = pointsToChange => {
    this.props.dispatch({
      type: 'yangji/changePointsToFeedEff',
      pointsToChange
    });
  };
  onToSendEgg = eggCount => {
    if (eggCount > 0) {
      const alertInstance = alert('确认要将所有鸡蛋邮寄？', '', [
        {
          text: '确认',
          onPress: () => {
            console.log(this.props)
            this.props.dispatch({
              type: 'main/goToMobileShopWithToken',
              host: mobileShopUrl,
              hash: '#/pages/myCart/index',
              query: `?goodType=egg&count=${eggCount}&`
            });
          },
          style: 'default'
        },
        { text: '再想想', onPress: () => alertInstance.close() }
      ]);
    } else {
      Toast.info('未收获任何鸡蛋，不能邮寄哦');
    }
  };
  render() {
    let { showMyPoints, showRule, showModal, showSignInSuccess, isNight } = this.state;
    let { feed, feed_has_eat, egg, points, headimgurl } = this.props;
    let percent = parseFloat((feed_has_eat / 5).toFixed(1));
    let changeData = [1, 5, 10, 20, 30, 40, 50];
    return (
      <div className={styles.chick_manor}>
        {isNight ? (
          <div className={styles.chick_background} />
        ) : (
          <div className={styles.chick_baitian} />
        )}
        <div className={styles.manorName}>
          <p className={styles.pw_manor}>精天庄园</p>
        </div>

        <div className={styles.portrait}>
          <img src={headimgurl} alt="" className={styles.imgs_portrait} />
        </div>

        <div className={styles.integral} onClick={this.onShowPoints}>
          <img src={require('src/assets/jifen3.png')} alt="" className={styles.imgs_integral} />
          <span className={styles.span_integral}>积分</span>
        </div>

        <div className={styles.Notice} onClick={this.onShowRule}>
          <img src={require('src/assets/gogao.png')} alt="" className={styles.imgs_Notice} />
          <span className={styles.span_Notice}>公告</span>
        </div>

        <div className={styles.egg}>
          <img src={require('src/assets/jidang.png')} alt="" className={styles.imgs_egg} />
          <div className="show-info">
            <div className="progress">
              <Progress percent={percent} position="normal" />
            </div>
            <div aria-hidden="true">{percent}%</div>
          </div>
        </div>

        <div className={styles.chick}>
          <img src={require('src/assets/tuji_1.png')} alt="" className={styles.imgs_chick} />
        </div>

        <div className={styles.feed}>
          {feed > 0 ? (
            <img
              src={require('src/assets/ciliao_pang.png')}
              alt=""
              className={styles.imgs_feed}
              onClick={this.onFeedChick}
            />
          ) : (
            <img
              src={require('src/assets/empty_siliaopang.png')}
              alt=""
              className={styles.empty_feed}
              onClick={() => Toast.info('没有饲料了，赶快签到领取饲料或者用积分兑换饲料吧')}
            />
          )}
        </div>

        <div className={styles.exchange} onClick={this.onShowModal}>
          <img src={require('src/assets/siliao.png')} alt="" className={styles.imgs_exchange} />
          <span className={styles.span_exchange}>兑换饲料</span>
        </div>

        <div className={styles.quantity} onClick={this.onShowSignInSuccess}>
          <img
            src={require('src/assets/qiandao4-copy.png')}
            alt=""
            className={styles.imgs_quantity}
          />
          <span className={styles.span_quantity}>签到</span>
        </div>

        <div className={styles.Number} onClick={this.onToSendEgg.bind(this, egg)}>
          <img src={require('src/assets/danglei.png')} alt="" className={styles.imgs_Number} />
          <span className={styles.span_Number}>
            已收获： <a className={styles.a_Number}>{egg}</a>
          </span>
        </div>

        <div className={styles.Existing}>
          <img src={require('src/assets/siliao_1.png')} alt="" className={styles.imgs_Existing} />
          <span className={styles.span_Existing}>{feed}g</span>
        </div>

        {showMyPoints && (
          <div className={styles.integral_click}>
            <div className={styles.black_back}>
              <div className={styles.Close} onClick={() => this.setState({ showMyPoints: false })}>
                <img src={require('src/assets/close.png')} alt="" className={styles.imgs_close} />
              </div>
              <img src={require('src/assets/jifen3.png')} alt="" className={styles.imgs_back} />
              <p className={styles.pw_text}>
                我的积分：
                <span className={styles.span_text}>{points}</span>
              </p>
            </div>
          </div>
        )}

        {showRule && (
          <div className={styles.attack}>
            <div className={styles.bigbox_attack}>
              <div className={styles.Close} onClick={() => this.setState({ showRule: false })}>
                <img src={require('src/assets/close.png')} alt="" className={styles.imgs_close} />
              </div>
              <h3 className={styles.one_attack}>规则公告</h3>
              <div className={styles.backg_attack}>
                <img
                  src={require('src/assets/mkoliao.jpg')}
                  alt=""
                  className={styles.imgs_attack}
                />
              </div>
              <p className={styles.pw_attack}>规则说明:</p>
              <p className={styles.pw_attack}>喂养进度达到100%(500g)，即可获得8个鸡蛋。</p>
              {/* <button className={styles.butt_attack}>去养鸡</button> */}
            </div>
          </div>
        )}

        {showModal && (
          <div className={styles.Exchange_Click}>
            <label className={styles.dabox_exchange}>
              <div className={styles.fei_feed}>
                <img src={require('src/assets/siliao_1.png')} alt="" className={styles.imge_feed} />
              </div>
              <div className={styles.close} onClick={() => this.setState({ showModal: false })}>
                <img src={require('src/assets/close_2.png')} alt="" className={styles.imge_close} />
              </div>
              <p className={styles.pw_dabox}>小鸡饲料兑换</p>
              <div className={styles.zongbox}>
                {changeData.map((data, index) => (
                  <div className={styles.duihuan_div} key={index}>
                    <span className={styles.span_dui}>
                      消耗
                      {data}
                      积分兑换
                      {data * 5}
                      克饲料
                    </span>
                    <button
                      className={styles.butt_dui}
                      onClick={this.onChangePointsToFeed.bind(this, data)}
                    >
                      兑换
                    </button>
                  </div>
                ))}
              </div>
            </label>
          </div>
        )}

        {showSignInSuccess && (
          <div className={styles.Sign_Click}>
            <div className={styles.Sign_back}>
              <img
                src={require('src/assets/qiandao4-copy.png')}
                alt=""
                className={styles.imgs_back}
              />
              <p className={styles.pw_text}> 签到成功 </p>
            </div>
          </div>
        )}
      </div>
    );
  }
}
export default Yangji;
